<template>
  <div class="category">
    <div class="g-header-container">
      <category-header/>
    </div>
    <div class="g-content-container">
      <div class="category-tab-container">
        <category-tab @showRightContent="showRightContent"/>
      </div>
      <div class="category-content-container">
        <category-content
          :curId="curId"
          class="category-content"/>
      </div>
    </div>
  </div>
</template>
<script>
import categoryTab from './category-tab'
import categoryHeader from './category-header'
import categoryContent from './category-content'
export default {
  name: 'category',
  components: {
    categoryTab,
    categoryHeader,
    categoryContent
  },
  data () {
    return {
      curId: ''
    }
  },
  methods: {
    showRightContent (id) {
      this.curId = id
    }
  }
}
</script>
<style lang="stylus" scoped>
.category
  width 100%
  height 100%
  .g-content-container
    display flex
    .category-tab-container
      width 100px
    .category-content-container
      flex 1
</style>
